<template>
  <div class="charge-strategy-form">
    <div class="button-group">
      <a-button type="primary" class="save-btn">保存并下发</a-button>
      <a-button class="cancel-btn">取消编辑</a-button>
      <a-button type="link" class="copy-btn">复制策略</a-button>
    </div>

    <a-form :model="formState" layout="vertical">
      <div class="strategy-list">
        <div
          v-for="(item, index) in formState.strategies"
          :key="index"
          class="strategy-item"
        >
          <div class="strategy-row">
            <a-form-item label="开始时间">
              <a-time-picker
                v-model:value="item.startTime"
                format="HH:mm"
                valueFormat="HH:mm:ss"
                placeholder="请选择时间"
              />
            </a-form-item>

            <a-form-item label="结束时间">
              <a-time-picker
                v-model:value="item.endTime"
                format="HH:mm"
                valueFormat="HH:mm:ss"
                placeholder="请选择时间"
              />
            </a-form-item>

            <a-form-item label="有功功率(KW)">
              <a-input-number v-model:value="item.power" placeholder="请输入" />
            </a-form-item>

            <a-form-item label="SOC限制值(%)">
              <a-input-number
                v-model:value="item.socLimit"
                placeholder="请输入"
              />
            </a-form-item>

            <div class="operation-btns">
              <a-button
                type="primary"
                shape="circle"
                @click="addStrategy"
                v-if="index === formState.strategies.length - 1"
              >
                <template #icon><plus-outlined /></template>
              </a-button>
              <a-button
                type="primary"
                danger
                shape="circle"
                @click="removeStrategy(index)"
                v-if="formState.strategies.length > 1"
              >
                <template #icon><minus-outlined /></template>
              </a-button>
            </div>
          </div>
        </div>
      </div>
    </a-form>
  </div>
</template>

<script setup>
// 
import { PlusOutlined, MinusOutlined } from "@ant-design/icons-vue"

const formState = ref({
  strategies: [
    {
      startTime: null,
      endTime: null,
      power: null,
      socLimit: null,
    },
  ],
})

const addStrategy = () => {
  formState.value.strategies.push({
    startTime: null,
    endTime: null,
    power: null,
    socLimit: null,
  })
}

const removeStrategy = (index) => {
  formState.value.strategies.splice(index, 1)
}
</script>

<style lang="less" scoped>
.charge-strategy-form {
  padding: 20px;

  .button-group {
    margin-bottom: 20px;
    display: flex;
    gap: 8px;
  }

  .strategy-list {
    .strategy-item {
      margin-bottom: 16px;

      .strategy-row {
        display: flex;
        align-items: flex-start;
        gap: 16px;

        .ant-form-item {
          margin-bottom: 0;
          flex: 1;
        }

        .operation-btns {
          padding-top: 30px;
          display: flex;
          gap: 8px;
        }
      }
    }
  }
}
</style>
